<!--
 * @description  : 实地核查方位图-零售户|学校添加页面
 * @create       : 2024-7-30
-->

<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="`${navTitle}${entityTypeName}`" :custom-back="goBack" style="z-index: 99999"> </theme-navbar>
    <!-- #endif -->
    <u-dropdown class="" ref="searchDropDown">
      <u-dropdown-item v-if="entityType === 'school'" title="区域类型">
        <u-cell-group :border="false">
          <u-cell-item v-for="(item, index) in schoolTypes" :title="item.label" :arrow="false" :key="item.value" :style="{ color: item.checked ? '#2979ff' : '' }" @click="checkSchoolType(index)">
            <u-icon v-if="item.checked" slot="right-icon" size="40" :color="$theme.u_type_primary" name="checkbox-mark"></u-icon>
          </u-cell-item>
        </u-cell-group>
      </u-dropdown-item>
      <u-dropdown-item title="周边范围(m)">
        <view class="slot-content">
          <u-input type="number" placeholder="请输入范围" :border="true" v-model="standardDistance"></u-input>
          <u-button class="btn" type="primary" @click="rangeConfirm">
            确定
          </u-button>
        </view>
      </u-dropdown-item>
    </u-dropdown>
    <view class="content">
      <u-checkbox-group>
        <me-table :i="0" :index="0" :load-data="loadData" :height="getListViewHeight()" :init-load="initLoad" ref="mescrollItem0">
          <view slot-scope="{ data }" class="list-item-root form-style">
            <u-checkbox v-model="data.checked" :label-disabled="false">
              <view class="p-8">
                <text class="sub-title">{{ entityType === "retailer" ? "持证人姓名" : "名称" }}：</text>
                <text>{{ data.name }}</text>
              </view>
              <view class="p-8" v-if="entityType === 'retailer'">
                <text class="sub-title">许可证编号：</text>
                <text>{{ data.licNo }}</text>
              </view>
              <view class="p-8">
                <text class="sub-title">地址：</text>
                <text>{{ data.address }}</text>
              </view>
              <view class="p-8" v-if="entityType === 'school'">
                <text class="sub-title">类型：</text>
                <text>{{ dataTypeMap[data.type].label }}</text>
              </view>
              <view class="p-8">
                <text class="sub-title">经纬度：</text>
                <text>{{ data.lng }} / {{ data.lat }}</text>
              </view>
            </u-checkbox>
          </view>
        </me-table>
      </u-checkbox-group>
    </view>
    <view class="submit-btns btn-other-cls">
      <u-button type="primary" @click="submitEntity">
        确定
      </u-button>
    </view>
  </view>
</template>

<script>
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import meTable from "@/components/me-table.vue";
import certificateService from "@/service/certificate/certificate.service.js";

const dataTypeMap = {
  "01": { label: "零售户", value: "retailer" },
  "02": { label: "幼儿园", value: "kindergarten" },
  "03": { label: "中小学", value: "school" }
};
export default {
  components: {
    meTable
  },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      entityType: "",
      initLoad: true,
      schoolTypes: [
        {
          label: "幼儿园",
          value: "02",
          checked: true
        },
        {
          label: "中小学",
          value: "03",
          checked: false
        }
      ],
      standardDistance: "200",
      dataType: "02",
      location: [],
      dataTypeMap
    };
  },
  computed: {
    entityTypeName() {
      return this.entityType === "retailer" ? "零售户" : "学校";
    }
  },
  onLoad(opt) {
    this.entityType = opt.type;
    this.location = opt.curLocation.split(",");
  },
  methods: {
    getListViewHeight() {
      let p = this.$u.sys().windowHeight - 44 - 48 - uni.upx2px(10) - this.$u.sys().statusBarHeight + "px";
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - uni.upx2px(10) - 48 - this.$u.sys().statusBarHeight + "px";
      // #endif
      return p;
    },
    async loadData(page) {
      let params = {
        longitude: this.location[0],
        latitude: this.location[1],
        areaCode: this.$storage.get("curConfirmInfo").curAreaCode,
        standardDistance: +this.standardDistance,
        dataType: this.entityType === "retailer" ? "00" : "01"
      };
      return new Promise((resolve, reject) => {
        certificateService
          .getPeripheryInfos(params)
          .then(res => {
            if (res.code == 200) {
              // 添加学校 根据查询类型过滤
              let list = res.data;
              if (this.entityType === "school") {
                list = res.data.filter(item => item.type === this.dataType);
              }
              resolve({
                count: res.data.length || 0,
                data: list || []
              });
            } else {
              this.$u.toast("请求失败:" + res.message);
              resolve({
                count: 0,
                data: []
              });
            }
          })
          .catch(err => {
            this.$u.toast("请求失败:" + err);
            resolve({
              count: 0,
              data: []
            });
          });
      });
    },
    submitEntity() {
      const list = this.$refs.mescrollItem0.listDatas.filter(item => item.checked);
      if (!list.length) {
        return this.$modal.alert(`请勾选${this.entityTypeName}`);
      }
      const entityList = list.map(item => {
        const { name, address, type, lng, lat, bizUUid, licNo } = item;
        return {
          name,
          address,
          type,
          bizUUid,
          licNo,
          longitude: lng,
          latitude: lat,
          id: bizUUid,
          entityType: this.dataTypeMap[type].value,
          show: false
        };
      });
      this.$u.route({ type: "navigateBack" });
      uni.$emit("addEntity", {
        list: JSON.stringify(entityList)
      });
    },
    handleSearchList() {
      this.getMescroll(0).triggerDownScroll();
    },
    checkSchoolType(idx) {
      this.schoolTypes.forEach(item => {
        delete item.checked;
      });
      this.$set(this.schoolTypes[idx], "checked", true);
      this.dataType = this.schoolTypes[idx].value;
      this.$refs.searchDropDown.close();
      this.handleSearchList();
    },
    rangeConfirm() {
      this.$refs.searchDropDown.close();
      this.handleSearchList();
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  background-color: #f3f4f5;
  min-height: calc(100vh - 46px);
  padding-bottom: 160rpx;
}

.slot-content {
  background-color: #ffffff;
  padding: 28rpx 28rpx;
  font-size: 24rpx;
}

.btn {
  margin-top: 28rpx;
  font-size: 26rpx;
  height: 70rpx;
}

/deep/.u-dropdown__menu__item__text {
  font-size: 24rpx !important;
}
/deep/.u-cell_title {
  font-size: 24rpx;
}
/deep/.u-cell {
  padding: 24rpx 28rpx;
}
.placeholder-font-size {
  font-size: 24rpx;
}

.list-item-root {
  margin: 10px 0;
  overflow: hidden;
  background: #ffffff;
}

.form-style {
  padding: 0rpx 8rpx;
}

/deep/ .u-checkbox-group {
  display: contents;
}
/deep/ .u-checkbox {
  flex-wrap: nowrap;
  align-content: flex-start;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 96% !important;
}

.sub-title {
  color: $u-tips-color;
  padding-bottom: 10rpx;
  font-size: 26rpx;
}
.p-8 {
  padding-top: 16rpx;
  font-size: 26rpx;
}
.u-size-default {
  font-size: 28rpx;
}
</style>
